import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 全局 state 对象，用于保存所有组件的公共数据
// const state = {
//     // 定义一个 user 对象
//     // 在组件中是通过 this.$store.state.user 来获取
//     user: {
//         name: ''//会被我们自己的用户数据覆盖
//     }
// };
//
/*
在sessionStorage里面尝试获取数据state的值,
如果有这个值就取值JSON.parse(sessionStorage.getItem('state'))转json
然后赋值给state这个自定义的全局对象,
如果没有这个值就设置一个默认值user对象==> user: {name: ''}
*/

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {user: {name: ''}};
// 实时监听 state 值的最新状态，注意这里的 getters 可以理解为计算属性
//session.getAttr("user")
const getters = {
    // 在组件中是通过 this.$store.getters.getUser 来获取
    getUser(state) {
        return state.user;
    }
};

//session.setAttr("user",obj)

// 定义改变 state 初始值的方法，这里是唯一可以改变 state 的地方，缺点是只能同步执行
const mutations = {
    // 在组件中是通过 this.$store.commit('updateUser', user); 方法来调用 mutations
    updateUser(state, user) {
        state.user = user;
    }
};

// 定义触发 mutations 里函数的方法，可以异步执行 mutations 里的函数
const actions = {
    // 在组件中是通过 this.$store.dispatch('asyncUpdateUser', user); 来调用 actions
    asyncUpdateUser(context, user) {
        context.commit('updateUser', user);
    }
};

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});